<template>
  <div class="picture">
    <div class="pictureChil">
      <div
        v-for="(p, index) in pciList"
        :key="index">
        <el-image
          style="width: 100px; height: 100px; margin-right: 10px"
          :src="p"
          :preview-src-list="srcList"
          @click="onPreview(p)"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      srcList: [],
      pciList: [],
    }
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      },
    },
  },
  watch: {
    value: {
      handler(newVal) {
        const cdn = process.env.VUE_APP_CND
        const pic = newVal?.map(it => `${cdn}${it.value}`)
        this.pciList = pic
      },
    },
  },
  methods: {
    onPreview(pic) {
      this.srcList.push(pic)
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.picture {
  width: 100%;
  display: block;
}
.pictureChil {
  display: flex;
  flex-flow: row wrap;
}
</style>
>
